<script setup lang="ts">
import { alipay } from '@/utils';
import Discount from '../discount';
import type { PaymentProps } from '../types';

const props = defineProps<PaymentProps>();

const onAliPayClick = () => {
  alipay(props.payData.title, props.payData.desc, 0.01);
};
</script>

<template>
  <div>
    <Discount />
    <div
      class="mt-1 flex flex-col items-center justify-evenly rounded-md border-[1px] border-zinc-200 py-3 dark:border-zinc-600"
    >
      <p class="font-sans text-[32px] text-orange-600">
        <span class="text-base text-zinc-900 dark:text-zinc-200">
          支付金额：
        </span>
        <span class="mr-[-12px] text-lg">￥</span>
        {{ props.payData.price }}
      </p>

      <div class="mt-3 flex">
        <!-- 支付宝支付 -->
        <div
          class="flex h-[60px] w-[220px] cursor-pointer items-center rounded-sm border border-zinc-200 pl-2 duration-200 hover:bg-zinc-50 dark:border-zinc-600 hover:dark:bg-zinc-800"
          @click="onAliPayClick"
        >
          <img class="h-4 w-4" src="@/assets/images/alipay.png" alt="" />
          <p class="ml-1 text-xl text-zinc-800 dark:text-zinc-200">支付宝</p>
        </div>
      </div>
    </div>
  </div>
</template>
